<template>
  <div
    :role="props.name"
    class="border-dashed border-[1px] border-[gray] bgg-white cursor-move py-[8px] px-[2px] rounded-lg"
    :style="{ opacity: opacity }"
    @click="handlerAdd"
  >
    {{ props.description }}
  </div>
</template>

<script setup name="EditorComponentItem">
import { computed, unref } from 'vue'
import { ItemType } from '../config/index'

const props = defineProps({
  name: {
    type: String,
    default: '',
    required: true
  },
  description: {
    type: String,
    default: '',
    required: true
  }
})

const emit = defineEmits(['DragEnd'])

const handlerAdd = () => {
  emit('DragEnd', {
    name: props.name,
    props: {
      children: '按钮'
    }
  })
}
</script>
